<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=0.7, minimum-scale=0.7,maximum-scale=0.7, user-scalable=yes"/>
   <!-- <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header"  th:content="${_csrf.headerName}"/>-->

    <link rel="stylesheet" href="/static/login/css/normalize.css" th:href="@{/login/css/normalize.css}"/>
    <link rel="stylesheet" href="/static/login/css/demo.css" th:href="@{/login/css/demo.css}"/>
    <!--必要样式-->
    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" href="/static/login/css/component.css" th:href="@{/login/css/component.css}"/>
    <link rel="icon" type="image/x-icon" th:href="@{/images/favicon.png}" href="/static/images/favicon.png"/>
    <title>登录</title>
</head>
<body>
<div class="container demo-1">
    <div class="content">
        <div id="large-header" class="large-header">
            <canvas id="demo-canvas"></canvas>
            <div class="logo_box">
                <h3>欢迎你</h3>
                <form class="layui-form" action="" lay-filter="login-from">
                    <div class="input_outer">
                        <span class="u_user"></span>
                        <input name="username" class="text" style="color: #FFFFFF !important" type="text" lay-verify="username" autocomplete="off" placeholder="请输入账户">
                    </div>
                    <div class="input_outer">
                        <span class="us_uer"></span>
                        <input name="password" class="text"
                               style="color: #FFFFFF !important; position:absolute; z-index:100;" value="" lay-verify="password"
                               autocomplete
                               type="password" placeholder="请输入密码">
                    </div>
                    <div class="mb2">
                        <a id="sub" lay-filter="login"  lay-submit="" class="act-but submit" style="color: #FFFFFF">登录</a>
                    </div>
                </form>
                <div style="text-align: center;margin-bottom: 0;color: white">
                    <p>蜀ICP备19013873号</p>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="/static/layui/layui.js" th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script src="/static/jquery/jquery-3.2.1.min.js" th:src="@{/jquery/jquery-3.2.1.min.js}" charset="utf-8"></script>
<script src="/static/login/js/TweenLite.min.js" th:src="@{/login/js/TweenLite.min.js}" charset="utf-8"></script>
<script src="/static/login/js/EasePack.min.js" th:src="@{/login/js/EasePack.min.js}"></script>
<script src="/static/login/js/rAF.js" th:src="@{/login/js/rAF.js}"></script>
<script src="/static/login/js/demo-1.js" th:src="@{/login/js/demo-1.js}"></script>
<script th:inline="javascript">
    /*<![CDATA[*/
   /* let header = $("meta[name='_csrf_header']").attr("content");
    let token =$("meta[name='_csrf']").attr("content");*/

    layui.use(['form', 'layer'], function () {
        let form = layui.form,
            layer = layui.layer;
        //自定义验证规则
        form.verify({
            username: function(value){
                if(value.length < 1){
                    return '请输入账户';
                }
            },
            password: function(value){
                if(value.length < 1){
                    return '请输入密码';
                }
            }
        });

        //监听提交
        form.on('submit(login)', function(data){
            let index = layer.load(2);
            $.ajax({
                type: "POST",
                url: "/login_processing",
               // data: data.field,
              /*  beforeSend : function(xhr) {
                    xhr.setRequestHeader(header, token);
                },*/
                data : {
                    "username" :  data.field.username,
                    "password" :data.field.password
                },
                success: function(result){
                    if(result.code === 1){
                        window.location.href="/index";
                    }else {
                        layer.close(index);
                        layer.msg('登录失败', {icon: 2,time: 1200});
                    }
                },
                error : function(e){
                    layer.msg('网络错误', {icon: 2});
                }
            });
            return false;
        });
    });


    $(document).keydown(function(event){
        if(event.keyCode === 13){
            $("#sub").click();
        }
    });
    /*]]>*/
</script>
</body>
</html>
